<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./fonts/icon-font2.css">
  <link rel="stylesheet" href="./fonts/icon-font.css" />
  <script src="./js/flexable.js"></script>
  <style>
    body {
      background-color: #fafafa;
    }

    .search-bar {
      margin: .11rem;
      height: .35rem;
      display: flex;
      align-items: center;
    }

    .search-bar .search-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: .35rem;
      height: 100%;
      background-color: #fff;
    }

    .search-bar .search-icon i {
      font-size: .15rem;
    }

    .search-bar input {
      flex: 1;
      font-size: .14rem;
      color: #333;
    }

    .search-bar a {
      display: block;
      width: .8rem;
      height: 100%;
      line-height: .35rem;
      background-color: red;
      color: #fff;
      border-radius: 0 .04rem .04rem 0;
      text-align: center;
      font-size: .15rem;
    }

    .history {
      margin: .11rem;
      margin-top: 6.6667vw;
      /* display: none; */
    }

    .history .title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2.6667vw;
      font-size: 3.7333vw;
      color: #777;
    }

    .history .bd {
      display: flex;
      flex-wrap: wrap;
    }

    .history .bd span {
      width: 28.8vw;
      height: 8.16vw;
      margin-bottom: 2.6667vw;
      margin-right: 2.1333vw;
      background-color: #fff;
      font-size: 3.4667vw;
      line-height: 8.16vw;
      text-align: center;
      border-radius: 4.8vw;
    }
  </style>
</head>

<body>
  <div class="page-header-search page-header">
    <div class="go-back">
      <a href="javascript:;">
        <i class="iconfont icon-back_light"></i>
      </a>
    </div>
    <div class="page-title">商品搜索</div>
  </div>

  <div class="search-bar">
    <div class="search-icon">
      <i class="iconfont icon-sousuo"></i>
    </div>
    <input type="text" placeholder="请输入您搜索的商品" class="searchIpt">
    <a href="javascript:;" class="searchBtn">搜索</a>
  </div>

  <div class="history">
    <div class="title">
      <span>最近搜索</span>
      <span class="iconfont icon-shouye delete"></span>
    </div>
    <div class="bd">
      <!-- <span>Apple</span>
      <span>冰箱</span>
      <span>马丁靴</span>
      <span>手表</span>
      <span>画笔</span> -->
    </div>
  </div>

</body>

</html>